<template>
    <div>
      <div class="container-fluid">
          <div class="row" id="header">
            <div class="col-md-4">
              <i id="icon" class="el-icon-s-management"></i>
              
              <router-link to="/home"><span id="title">题库系统后台管理端</span></router-link>
              
            </div>
            <div class="col-md-6">
              <ul  v-if="!user"  class="nav navbar-nav myul navbar-right">
                <li class="l1"><router-link to="/login/">登录</router-link></li>
                <li class="l1"><router-link to="/register">注册</router-link></li>
              </ul>
              <span v-else class="welcome">欢迎您，<router-link :to="'/user/' + this.user"><el-avatar icon="el-icon-user-solid" class="portrait"></el-avatar></router-link>&nbsp;{{user}}&nbsp;|  <a href="" @click="logout">  退出登录 </a></span>
              
            </div>

          </div>
      </div>
      <div id="headerBlank"></div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  computed:{
    ...mapState('user',['user']),

  },
  
  methods:{
    logout(){
      this.deleteUser();
      this.axios.get("/logout",{
        headers:{"token":sessionStorage.getItem("token")}
      })
      .then(Response=>{
        if(Response.status==200){
            this.deleteUser();
            sessionStorage.setItem("isAuth",false);
            // this.$router.replace("/home"); //跳转到路径
            this.$message({
            type: "success",
            message: "退出成功!"
          });
        }else
          this.$message({
            type: "error",
            message: "退出失败!"
          });
      })
    },
      deleteUser(){
        this.$store.commit('user/deleteUser')
    },
  },
}

</script>

<style>
#header {
  /* 固定在顶部 */
  position: fixed;
  z-index:100;
  top:0;
  width: 100%;

  box-shadow: 0 1px 4px 0 rgb(58 62 81 / 20%);

  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  background: #ffffff;
  height: 64px;
}
/* 填补页头的浮动 */
#headerBlank{
  height: 64px;
}
#icon {
  font-size: 50px;
  margin-right: 10px;
  line-height: 64px;
}
#title {
  position: absolute;
  bottom: 9px;
  font-size: 24px;
  font-weight: 600;
  line-height: 50px;
  
}
.l1 {
  position: absolute;
  top: 10px;
  color: #000000;
  font-size: 24px;
  font-weight: 600;
  line-height: 50px;
  font-size: 15px;

  text-align: center;
  list-style: none;
}
.portrait{
  position:relative;
  top: 13px;
}
.welcome{
  margin-left: 500px;
}
a {
    color: #267d90 !important;
    text-decoration: none;
}
</style>